<template>
  <!-- 外访待分配-个人分案-确认分案-组件 -->
  <section class="component visit-confirm-distribution">
    <distribution-pattern v-model="model.distributeMode"></distribution-pattern>
    <data-box :data="userDataSet" ref="data-box">
      <template slot="buttons">
        <div>
          共选择{{model.caseIds.length}}个案件
          <el-checkbox v-model="model.debt" true-label="YES" false-label="NO" @change="debtChange" class="right-button">共债案件优先分配到同一催收员</el-checkbox>
        </div>
      </template>
      <template slot="columns">
        <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="realName" label="催收员" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="currentNum" label="当前案件数" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="currentAmt" label="当前案件总金额" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column label="确认分配案件数" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-input :disabled="model.distributeMode!=='BY_CUSTOMIZE'" type="number" :maxlength="2" v-model="scope.row.num" :min="0" :max="inputMax"></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="sumCapital" label="案件本金" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => this.isCustomerDistribution? '-':row.sumCapital"></el-table-column>
        <el-table-column prop="sumAmt" label="案件总金额" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => this.isCustomerDistribution? '-':row.sumAmt"></el-table-column>
        <el-table-column prop="sumNum" label="案件总数量" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => this.isCustomerDistribution? '-':row.sumNum"></el-table-column> -->
        <el-table-column prop="sumCapital" label="案件本金" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <span>{{sumHidden ? '-' : scope.row.sumCapital}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sumAmt" label="案件总金额" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span>{{sumHidden ? '-' : scope.row.sumAmt}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sumNum" label="案件总数量" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <span>{{sumHidden ? '-' : scope.row.sumNum}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <div style="text-align:center;margin-top:30px;">
      <el-button @click="back">上一步</el-button>
      <el-button @click="cancle">取消</el-button>
      <el-button @click="next">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataBox from "~/components/common/data-box.vue";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Prop, Emit, Watch } from "vue-property-decorator";
import { VisitCaseManageService } from "~/services/domain-service/visit-case-manage.service.ts";
import { CaseAssistService } from "~/services/domain-service/case-assist.service.ts";
import DistributionPattern from "~/components/distribution-common/distribution-pattern.vue";

@Component({
  components: {
    DataBox,
    DistributionPattern
  }
})
export default class VisitConfirmDistribution extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(VisitCaseManageService)
  private visitCaseManageService: VisitCaseManageService;
  @Dependencies(CaseAssistService)
  private caseAssistService: CaseAssistService;

  @Prop({ required: true })
  private distributionData: any;
  @Prop({ required: false, type: Boolean })
  private again: boolean;

  /**
   * 查询实体
   */
  private model: any = {
    distributeCategory: "TO_COLLECTOR",
    commonFlag: "YES",
    distributeMode: "BY_CUSTOMIZE",
    distributeNumber: [],
    analyseId: "", // 分案预览
    debt: "NO" // 共债
  };

  /**
   * table数据源
   */
  private userDataSet: any[] = [];

  /**
   * 是否自定义分配
   */
  private get isCustomerDistribution() {
    return this.model.distributeMode === "BY_CUSTOMIZE";
  }

  private get sumHidden() {
    if (this.model.distributeMode === 'BY_CUSTOMIZE' || this.again) return true;
    return false;
  }
  /**
   * 输入框最大值
   */
  private get inputMax() {
    return this.model.caseIds.length;
  }

  /**
   * 共债选项改变
   */
  private debtChange(value) {
    if (
      this.model.distributeMode &&
      this.model.distributeMode !== "BY_CUSTOMIZE"
    ) {
      this.reviewDistributeCase();
    }
  }

  @Emit("refreshList")
  private refreshList() {}

  @Watch("model.distributeMode")
  private onDistributeModeChange(val) {
    this.reviewDistributeCase();
  }

  @Watch("distributionData", { immediate: true })
  private distributionDataChange(value) {
    if (!value) return;
    this.userDataSet = value.selectedUser;
    this.model.userIds = value.selectedUser.map(v => v.id);
    this.model.caseIds = value.selectedCase.map(v => v.id);
    this.reviewDistributeCase();
  }

  /**
   * 获取预览分案结果
   */
  private reviewDistributeCase() {
    this.visitCaseManageService.reviewDistributeCase(this.model).subscribe(
      data => {
        this.userDataSet = data.resDistModel || [];
        this.model.analyseId = data.analyseId;
      },
      err => {
        this.resetDistributionModel();
      }
    );
  }

  //取消
  @Emit("close")
  private cancle() {
    this.resetDistributionModel();
  }
  //上一步
  @Emit("back")
  private back() {
    this.resetDistributionModel();
  }

  //确定
  private next() {
    this.model.distributeNumber = this.userDataSet.map(v => parseInt(v.num));
    this.visitCaseManageService
      .confirmDistributeCase(this.model)
      .subscribe(data => {
        this.$message.success("分配成功");
        this.cancle();
        this.refreshList();
      });
  }

  /**
   * 初始化查询实体基础信息
   */
  private resetDistributionModel() {
    this.model.distributeMode = "BY_CUSTOMIZE";
    this.model.distributeNumber = [];
    this.model.analyseId = "";
  }
}
</script>
<style lang="less" scoped>
.component.visit-confirm-distribution {
  .right-button {
    margin-left: 20px;
  }
}
</style>
